<!--展开收起ui组件-->
<template>
  <div class="ui-unfold">
    <slot name="label"></slot>
    <span @click="spreadClickFun" v-show="isShowFlag && title.length !==0" class="ui-unfold-span">{{title[0]}} <i class="el-icon-arrow-up"></i></span>
    <span @click="retractClickFun" v-show="!isShowFlag  && title.length !==0" class="ui-unfold-span">{{title[1]}} <i class="el-icon-arrow-down"></i></span>
    <div v-show="isShowFlag">
      <slot name="unfoldSlot"></slot>
    </div>
  </div>
</template>

<script>
    export default {
      name: 'unfold',
      data () {
        return {
          isShowFlag: this.isShow
        }
      },
      watch: {
        isShow () {
          this.isShowFlag = this.isShow
        }
      },
      props: {
        title: {
          type: Array,
          default: function () {
            return ['收起查询条件', '展开查询条件']
          }
        },
        isShow: {
          type: Boolean,
          default: true
        }
      },
      methods: {
        spreadClickFun () { // 展开点击事件
          this.isShowFlag = false
        },
        retractClickFun () { // 收起点击事件
          this.isShowFlag = true
        }
      }
    }
</script>

<style scoped lang="stylus">
  @import "../../../assets/common.styl"
  .ui-unfold
    display inline
    width 100%
  .ui-unfold-span
    cursor pointer
    color $c-main
    display inline-block
</style>
